import React, { useEffect, useState } from 'react'
import { Modal } from 'antd'
import { css } from '@/utils/index'
import { isClickHand } from '@/const/config'
import { languages } from './const'

export default function (props: any) {
  const { LG, language, updateLanguage } = props

  const [show, setShow] = useState(false)
  const onShow = () => setShow(true)
  const onClose = () => setShow(false)

  const onTap = item => {
    language !== item.value && updateLanguage(item.value)
    onClose()
  }

  return (
    <>
      <div onClick={onShow} className={`language ${isClickHand}`}>
        {LG.setting}
      </div>
      <Modal open={show} onCancel={onClose} footer={null}>
        <div className='language-list'>
          {languages.map(item => (
            <div
              key={item.label}
              onClick={() => onTap(item)}
              className={css(`item ${isClickHand}`, { active: language === item.value })}
            >
              <p className='item-text'>{item.label}</p>
            </div>
          ))}
        </div>
      </Modal>
    </>
  )
}
